<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-tag>线索ID:{{id}}</el-tag>
        <el-descriptions class="margin-top" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              创建时间
            </template>
            {{form.createTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{form.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              来源渠道
            </template>
            苏州市
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              线索归属
            </template>
            <el-tag size="small">{{form.owner}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              活动信息
            </template>
            江苏省苏州市吴中区吴中大道 1188 号
          </el-descriptions-item>
        </el-descriptions>
        <el-button type="danger">伪线索</el-button>
        <el-button type="success">转商机</el-button>
        <el-divider></el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="form.name"  placeholder="请输入客户姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请输入性别">
                  <el-option
                    v-for="dict in dict.type.sys_user_sex"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age"  placeholder="请输入年龄" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信号" prop="weixin">
                <el-input v-model="form.weixin"  placeholder="请输入微信号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="QQ号" prop="qq">
                <el-input v-model="form.qq"  placeholder="请输入QQ号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="意向等级" prop="level">
                <el-select v-model="form.level" placeholder="请输入意向等级">
                  <el-option
                    v-for="dict in dict.type.clues_level"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="意向学科" prop="subject">
                <el-select v-model="form.subject" placeholder="请输入意向学科">
                  <el-option
                    v-for="dict in dict.type.course_subject"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下次跟进时间" prop="nextTime">
                <el-date-picker
                  v-model="form.nextTime"
                  type="date"
                  placeholder="选择下次跟进时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="跟进记录" prop="record">
                <el-input v-model="form.record" type="textarea" placeholder="请输入跟进记录" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item>
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button type="primary" @click="$emit('cancel')">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="8">
        <track-list :id="id" :search="'线索'"></track-list>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getClue } from "@/api/crm/clue";
import { addClueTrack } from "@/api/crm/clueTrack";
import TrackList from "@/views/crm/clue/components/track-list.vue";
export default {
  name: "track-index",
  components: {TrackList},
  dicts: ['sys_user_sex','course_subject','clues_level'],
  props:{
    clueId:{
      type: [String,Number]
    }
  },
  data(){
    return{
      id: this.clueId,
      form: {},
      rules: {},
      trackListKey:0
    }
  },
  watch:{
    clueId(newValue,oldValue){
      this.id = newValue
      this.getList()
    }
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
      getClue(this.id).then(resp =>{
        this.form = resp.data
      })
      this.trackListKey++
    },

    submitForm(){
      addClueTrack(this.form).then(resp =>{
        this.$message.success('操作成功')
        this.getList()
        //通知父组件
        this.$emit('success')
      })
    }
  }
}
</script>

<style scoped>

</style>
